<!--
 * @Date: 2025-09-07 21:10:46
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-11-19 16:43:01
 * @FilePath: /admin-vue/src/components/ad/ad-modal.vue
-->
<script setup lang="ts">
import { computed } from 'vue'

defineOptions({ name: 'AdModal' })

// 弹窗Props定义
interface Props {
  /** 弹窗可见性（双向绑定） */
  visible: boolean
  /** 弹窗标题 */
  title: string
  /** 弹窗最大宽度（默认max-w-md） */
  maxWidth?: string
  /** 按钮加载状态 */
  loading?: boolean
}

// 弹窗事件定义
interface Emits {
  /** 关闭弹窗时触发（用于双向绑定visible） */
  (e: 'update:visible', visible: boolean): void
  /** 点击确认按钮时触发 */
  (e: 'confirm'): void
}

// 接收Props和Emits
const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 双向绑定visible（简化父组件调用）
const modalVisible = computed({
  get() {
    return props.visible
  },
  set(visible) {
    emit('update:visible', visible)
  },
})

// 关闭弹窗（触发update:visible事件）
const handleClose = () => {
  modalVisible.value = false
}

// 点击确认按钮（触发confirm事件，同时关闭弹窗）
const handleConfirm = () => {
  emit('confirm')
}
</script>

<template>
  <!-- 通用弹窗核心结构 -->
  <n-modal v-model:show="modalVisible" preset="card" :title="title" @close="handleClose">
    <!-- 插槽：弹窗内容区（由父组件传入，如表单） -->
    <slot></slot>

    <!-- 弹窗底部按钮区 -->
    <template #footer>
      <n-space justify="end">
        <NButton @click="handleClose">{{ $t('common.cancel') }}</NButton>
        <NButton type="primary" :loading="loading" @click="handleConfirm">{{ $t('common.confirm') }}</NButton>
      </n-space>
    </template>
  </n-modal>
</template>

<style lang="scss" scoped></style>
